import type { WatermarkProps } from '@/types/watermark'
import React, { useRef } from 'react'
import { useResponsiveFontSize } from './useResponsiveFontSize'
import styles from './watermark.less'

const FONT_SIZE_RATIO = 0.02

/**
 * 富士风格水印组件
 * @description 右侧logo+参数，左侧品牌和日期，支持自适应
 */
const Standard2Watermark: React.FC<
  WatermarkProps & {
    fontSizeRatio?: number
    textColor?: string
    logoSizeRatio?: number
    paddingEm?: number
  }
> = ({
  image,
  watermarkConfig,
  deviceModel,
  containerRef,
  brandLogo,
  fontSizeRatio = 1,
  textColor,
  logoSizeRatio = 1,
  paddingEm = 1
}) => {
  const imgRef = useRef<HTMLImageElement>(null)
  const watermarkRef = useRef<HTMLDivElement>(null)
  useResponsiveFontSize(imgRef, watermarkRef, FONT_SIZE_RATIO * fontSizeRatio)

  // 优先使用watermarkConfig.dateTime
  const date = watermarkConfig.dateTime || ''
  const infoBgColor = watermarkConfig.backgroundColor

  return (
    <div
      ref={containerRef}
      className={styles.fujifilmContainer}
      style={{ background: infoBgColor, color: textColor, padding: `${paddingEm}em` }}
    >
      <div className={styles.fujifilmFrame}>
        {/* 原始图片 */}
        <img ref={imgRef} src={image || ''} alt="Preview" className={styles.originalImage} />
        {/* Fujifilm风格信息栏 */}
        <div ref={watermarkRef} className={styles.fujifilmInfo} style={{ color: textColor }}>
          {/* 左栏 */}
          <div className={styles.fujifilmLeft}>
            <div className={styles.fujifilmBrand}>{deviceModel}</div>
            <div className={styles.fujifilmDate}>{date}</div>
          </div>
          {/* 右栏 */}
          <div className={styles.fujifilmRight}>
            {/* 右栏左侧 - Logo */}
            {brandLogo ? (
              <img
                src={brandLogo}
                alt="Fujifilm Logo"
                className={styles.fujifilmLogo}
                style={{ height: `${2.7 * logoSizeRatio}em`, width: 'auto', objectFit: 'contain' }}
              />
            ) : null}
            {/* 分隔线 */}
            <div className={styles.fujifilmSeparator}></div>
            {/* 右栏右侧 - 参数和镜头 */}
            <div className={styles.fujifilmRightDetails}>
              <div className={styles.fujifilmExif}>
                {watermarkConfig.showFocalLength &&
                  watermarkConfig.exifData.focalLength?.replaceAll(' ', '')}{' '}
                {watermarkConfig.showAperture && watermarkConfig.exifData.aperture.replace('F', '')}{' '}
                {watermarkConfig.showShutter && watermarkConfig.exifData.shutterSpeed}{' '}
                {watermarkConfig.showISO && `ISO${watermarkConfig.exifData.iso.replace('ISO', '')}`}
              </div>
              {watermarkConfig.showLensInfo && (
                <div className={styles.fujifilmLens}>
                  {watermarkConfig.lensInfo || 'unknown lens'}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Standard2Watermark
